<template>
	<div class="other-page">
		<div class="other-page__info" v-loading.fullscreen.lock="fullscreenLoading">
			<div class="other-page__info__img">
				<img :src="person.baseInfo.memId.headImgUrl"/>
			</div>
			<div class="other-page__info__detail">
				<div class="other-page__info__detail__item">
					<p>{{person.baseInfo.memId.nickname}}
						<i class="icon icon-phone" v-if="person.info.phone"></i>
						<i class="icon icon-email" v-if="person.info.email"></i>
						<i class="icon icon-realname" v-if="person.baseInfo.realname"></i></p>
					<p>ID: {{person.baseInfo.memId.id}}</p>
				</div>
				<div class="other-page__info__detail__item">
					<div class="other-page__info__detail__item__list">
						<p><span>年龄：</span><span>{{person.baseInfo.age}}</span></p>
						<p><span>身高：</span><span>{{person.baseInfo.height}}</span></p>
						<p><span>学历：</span><span>{{person.baseInfo.education}}</span></p>
					</div>
					<div class="other-page__info__detail__item__list">
						<p><span>月薪：</span><span>{{person.baseInfo.salary}}</span></p>
						<p><span>工作：</span><span>程序员</span></p>
						<p><span>籍贯：</span><span>{{person.baseInfo.origin}}</span></p>
					</div>
					<div class="other-page__info__detail__item__list">
						<p><span>星座：</span><span>{{person.dtlInfo.constellation}}</span></p>
						<p><span>工作地点：</span><span>{{person.baseInfo.workAddress}}</span></p>
						<p><span>婚姻情况：</span><span>{{person.baseInfo.maritalStatus}}</span></p>
					</div>
				</div>
				<div class="other-page__info__detail__item other-page__info__detail__item--button">
					<el-button type="primary" @click="toEmail">发邮件</el-button>
					<el-button @click="addFriend" :disabled="isDisabled" :loading="addFriendPadding">
						{{this.person.friendStatus==0?'请求好友':'已是好友'}}
					</el-button>
				</div>
			</div>
		</div>
		<div class="other-page__mood">
			<span class="other-page__mood_title">我的心情</span>
			<el-card class="other-page__mood__list" v-for="(item,index) in person.mood.objects" :key="index">
				<div class="mycomment">
				  	<p>
				    	{{item.content}}
				  	</p>
				  	<div>
				  		<time class="time">2017-8-30 10:45</time>
				  		<div class="operate">
					  		<i class="icon icon-comment"></i><span @click="getComment(item.id)">评论</span>
				  		</div>
				  	</div>
			  	</div>
			  	<div v-if="isComment" v-loading="isloading==item.id"></div>
			  	<div class="reply" v-if="isComment==item.id" v-for="(comment,index) in person.comments.objects" :key="index">	
					<div><span>{{comment.reviewerId.nickname}}：</span><span>{{comment.content}}</span></div>
					<div><time class="time">{{comment.reviewerId.logTime}}</time></div>
			  	</div>
			  	<div class="comment_area" v-if="isComment==item.id">
			  		<el-input type="textarea" v-model="commentContent"></el-input>
			  		<el-button type="primary" size="small" class="comment_button" @click="comment(item.id)">评论</el-button>
			  	</div>	
			</el-card>
		</div>
		<div class="other-page__data">
			<div>
				<div class="data_list">
					<p><span>性别：</span><span>{{person.baseInfo.gender==1?'女':'男'}}</span></p>
					<p><span>年龄：</span><span>{{person.baseInfo.age}}</span></p>
					<p><span>身高：</span><span>{{person.baseInfo.height}}</span></p>
					<p><span>体重：</span><span>{{person.dtlInfo.weight}}</span></p>
					<p><span>民族：</span><span>{{person.dtlInfo.nation}}</span></p>
				</div>
				<div class="data_list">
					<p><span>星座：</span><span>{{person.dtlInfo.constellation}}</span></p>
					<p><span>血型：</span><span>{{person.dtlInfo.blood}}</span></p>
					<p><span>籍贯：</span><span>{{person.baseInfo.origin}}</span></p>
				</div>
			</div>
			<div></div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import pagination from '../../widget/pagination/pagination.vue'

	export default {
	  	name: 'otherPage',
	  	data () {
	  		return {
	  			isloading: true,
	  			isComment: '',
	  			isDisabled: false,
	  			fullscreenLoading: false,
	  			addFriendPadding: false,
	  			person: {
	  				userid: this.$route.query.userId,
	  				baseInfo: {
	  					age:'',
	  					height:'',
	  					gender:'',
	  					education: '',
	  					salary:'',
	  					origin:'',
	  					workAddress:'',
	  					maritalStatus:'',
	  					memId:{
	  						nickname: '',
	  					},
	  					realname: ''
	  				},
	  				dtlInfo: {
	  					blood:'',
	  					nation:'',
	  					zodiac:'',
	  					religious:'',
	  					constellation:'',
	  					id:'',
	  					hair:'',
	  					face:'',
	  					living:'',
	  					car:''
	  				},
	  				info: {
	  					phone: '',
	  					email: ''
	  				},
	  				mood: {},
	  				comments: {},
	  				friendStatus: 0
	  			},
	  			commentContent: ''
	  		}
	  	},
	  	components: {
		    pagination: pagination
		},
		mounted: function() {
			this.getAllInfo();
			this.getMood();
			this.getFriendStatus();
		},
		methods: {
			toComment() {
				this.isComment = !this.isComment;
			},
			getAllInfo() {
				this.$http({
					method: 'get',
					url: 'personlist/getMemInfo',
					params: {
					    id: this.person.userid
					}        			
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.person.baseInfo = response.data.object.memInfoBase;
						this.person.baseInfo.memId.headImgUrl = this.$img + this.person.baseInfo.memId.headImgUrl;
						this.person.dtlInfo = response.data.object.memInfoDtl;
						this.person.info = response.data.object.member;
					}
				}).catch((err)=>{  
				})
			},
			getMood() {
				this.$http({
					method: 'get',
					url: 'mood/getMood',
					params: {
					    id: this.person.userid
					}        			
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						if(response.data.object!=null)
							this.person.mood = response.data.object;
					}
				}).catch((err)=>{  
				})
			},
			comment(target_id) {
				this.$http({
					method: 'post',
					url: 'comment/addComment',
					data: 
					{
						"type": 0,
						"content": this.commentContent,
						"target_id": target_id
					}
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.getComment(target_id);
						this.commentContent = ''
					}else{
						this.$message.error(response.data.message);
					}
				}).catch((err)=>{
				})  
			},
			getComment(target_id) {
				this.isComment = target_id;
				this.isloading = target_id;
				this.$http({
					method: 'get',
					url: 'comment/getComment',
					params: {
					    "target_id": target_id
					}        			
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.person.comments = response.data.object;
						this.isloading = '';
					}else {
						this.isloading = '';
					}
				}).catch((err)=>{  
				})
			},
			getFriendStatus() {
				this.$http({
					method: 'get',
					url: 'friend/isFriend',
					params: {
					    "id": this.person.userid
					}        			
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						if(response.data.object == true) {
							this.isDisabled = true;
							this.person.friendStatus = 1;
						}else {

						}
						
					}else {

					}
				}).catch((err)=>{  
				})
			},
			addFriend() {
				this.addFriendPadding = true
				this.$http({
					method: 'post',
					url: 'friend/apply',
					data: 
					{
						"id": this.person.userid,
					}
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.isDisabled = true;
						this.person.friendStatus = 0;
						this.addFriendPadding = false
					}else {
				        this.$message.error(response.data.message);
				        this.addFriendPadding = false
					}
				}).catch((err)=>{
				})  
			},
			toEmail() {
				this.$router.push({ path: 'personCenter/myEmail', query: { userId: this.userid }})
			}
		}
	}
</script>

<style scoped>
	.other-page__info {
		width: 1100px;
		height: 300px;
		margin: 0 auto;
		margin-top: 20px;
	}
	.other-page__info__img {
		float: left;
		border: 1px solid #e4e4e4;
		padding: 10px;
		margin-right: 20px;
	}
	.other-page__info__img img {
		width: 223px;
		height: 274px;
	}
	.other-page__info__detail {
		float: left;
		width: 793px;
		height: 278px;
		border: 1px solid #e4e4e4;
		padding: 20px;
		padding-top: 0;
	}
	.other-page__info__detail__item {
		overflow: hidden;
	}
	.other-page__info__detail__item:nth-child(2) {
		border-top: 1px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
	}
	.other-page__info__detail__item__list {
		float: left;
		width: 30%;
	}
	.other-page__info__detail__item--button {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.other-page__mood {
		width: 1078px;
		margin: 0 auto;
		margin-top: 20px;
		border: 1px solid #e4e4e4;
		padding: 10px;
	}
	.other-page__mood_title {
		display: inline-block;
		padding-bottom: 2px;
		margin-left: 10px;
		margin-bottom: 20px;
		border-bottom: 2px solid #fb7d9b;
		font-size: 20px;

	}
	.other-page__mood__list {
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
	}
	.mycomment {
		overflow: hidden;
		margin-bottom: 20px;
	}
	.time {
		color: #c5c3c0;
		font-size: 14px;
	}
	.operate {
		float: right;
		color: #c5c3c0;
		font-size: 14px;
	}
	.reply {
		border-top: 1px solid #d9bfc2;
		padding: 20px;
	}
	.comment_area {
		overflow: hidden;
	}
	.comment_button {
		margin-top: 10px;
		float: right;
	}
	.other-page__data {
		width: 1038px;
		padding: 10px;
		padding-left: 30px;
		padding-right: 30px;
		border: 1px solid #e4e4e4;
		margin: 0 auto;
		margin-top: 20px;
		overflow: hidden;
	}
	.data_list {
		float: left;
		width: 50%;
	}
</style>